import React, { Component } from 'react';
import "./Personnelmanagement.scss"
import { Icon, Button, Switch } from 'antd-mobile'

class Personnelmanagement extends Component {
	constructor() {
		super()
		this.state = {
			checked: true,
			data: [
				{ num: '001', name: '鞠志锋', type: '安装员', year: 1, checked: false },
				{ num: '002', name: '鞠志锋', type: '安装员', year: 1, checked: true },
			]
		}
	}
	componentDidMount() {
		document.getElementsByTagName('title')[0].innerHTML = '人员管理'
	}
	render() {
		let height = window.screen.height
		return (
			<div className="other-page OrderProgress personnelmanagement" style={{ minHeight: height + 'px' }}>
				<div className='searchbox'>
					<div className="search">
						<input type="text" placeholder="员工编号"></input>
						<Icon type="search" size={'md'} className="search-icon" />
					</div>
					<img src={require('../../images/filter.png')} />
				</div>
				<div className='caption border-b'>
					<div>员工编号</div>
					<div>姓名</div>
					<div>类型</div>
					<div>操作</div>
				</div>
				<div className='content'>
					{
						this.state.data.map((item, index) => {
							return (
								<div
									className='item border-b'
									key={index}
									style={{ borderBottomWidth: index === this.state.data.length - 1 ? 0 : 1 }}>
									<div className="td">{item.num}</div>
									<div className="td">{item.name}</div>
									<div className="td">{item.type}</div>
									<div className="td">
										<Switch
											// className='switch'
											color='#4d638c'
											checked={item.checked}
											onClick={(item) => {
												let data = this.state.data
												data[index].checked = !data[index].checked;
												this.setState({
													data
												})
											}}
										/>
									</div>
								</div>
							)
						})
					}
				</div>
				<Button className='bottom-fixed-but'>新增员工</Button>
			</div>
		);
	}
}

export default Personnelmanagement;